body  {
    background-color: skyblue;
}
.container {
    width: 980px;  /* 80px*12+20px=980px */
    margin: 0 auto;
    background-color: #bfa;
    min-height: 800px;
}
.row {
    clear: both;
}
.col {
    float: left;
    margin-left: 20px;
    width: 60px;
    background-color: #ff6700;
}
.col.span2 {
    width: 140px;
}
.col.span3 {
    width: 220px;
}
.col.span4 {
    width: 300px;
}
.col.span5 {
    width: 380px;
}
.col.span6 {
    width: 460px;
}
.col.span7 {
    width: 540px;
}
.col.span8 {
    width: 620px;
}
.col.span9 {
    width: 700px;
}
.col.span10 {
    width: 780px;
}
.col.span11 {
    width: 860px;
}
.col.span12 {
    width: 940px;
}